<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 20px auto;
				width: 1000px;
				height: 400px;
				border: 1px solid black;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<form action="">
				<label for="user">用户名:
					<input type="text" name="user" id="user" value="">
				</label>
				<br>
				<br>
				<input type="checkbox" name="agreement" checked>接受协议
				<br><br>
				
				<br><br>
				<button type="submit" >提交</button>
			</form>
		</div>
		<script type="text/javascript">
			//要求输入用户名，并且接受协议，才能提交
			let form = document.querySelector("form");
			
			//给表单添加一个事件监听-提交事件
			form.addEventListener('submit',function(e){
				let user = document.querySelector('[name=user]').value;
				let agr = document.querySelector('[name=agreement]').checked;
				if (!user || !agr ) { //user没有输入就会弹出来警告
					e.preventDefault()
					alert('请输入用户名，并接受协议')
					
				} else{
					console.log('都填好了');
				}
				
			})
			
			
		</script>
	</body>
</html>
